<!--
 @description 指定区域下的立面验收
 @fileName Edit.vue
 @author zengqiongying
 @created 2023/06/17 14:55:24
-->
<template>
  <div class="has-foot-pb bg-weaker">
    <div class="pd-lr-main">
      <div v-if="detail.module1" class="module-name">{{ detail.module1 }} / {{ detail.module2 }}</div>
      <div class="facade-create-form">
        <qmp-field
          v-model="formData.facade"
          :disabled="submitOver"
          maxlength="3"
          type="digit"
          input-align="center"
          placeholder="请输入验收立面数量"
          class="ctm-text-field"
          clearable
        />
        <div class="mg-t8">
          <qmp-button
            block
            :class="['ctm-btn-main', 'radius-xl', { disable: btnDisable }]"
            :disabled="btnDisable"
            @click="onSaveFace"
          >
            {{ submitOver ? '重新编辑' : '确认' }}
          </qmp-button>
        </div>
      </div>
      <div v-if="list.length > 0">
        <div class="module-name">立面验收</div>
        <FacadeItems
          :list="list"
          :acceptMold="acceptMold"
          :acceptLastFacadeNumber="detail.acceptLastFacadeNumber"
          @detail="onFacadeDetail"
        />
      </div>
    </div>
    <div v-if="list.length > 0" :class="['ctm-content-foot']">
      <div class="btn radius-larg ctm-btn-warning" @click="onFacadeAll">区域预览</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { toRefs, getCurrentInstance, computed } from 'vue'
  import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import { saveFacade } from '@/apis/Facade'
  import { ListCommon } from '@/mixins/Facade'
  import FacadeItems from '@/views/components/Facade/Items.vue'

  export default {
    name: 'FacadeEdit',
    components: { FacadeItems },
    filters: {},
    setup() {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $store = useStore()
      const $router = useRouter()
      const $route = useRoute()

      const { datas, getDetailData, onFacadeDetail, onFacadeAll } = ListCommon($router, $store, instance, 'edit')
      datas.amid = $route.query.id || ''
      datas.acceptMold = $route.query.acceptMold || ''

      const onSaveFace = () => {
        if (datas.submitOver) {
          datas.submitOver = false
          return
        }
        const params = { ...datas.formData }
        saveFacade(params).then((res: any) => {
          datas.submitOver = true
          getDetailData()
          proxy.$SimpleEvents.emit('refreshTaskDetail', params.caid)
        })
      }

      const btnDisable = computed(() => {
        return Number(datas.formData.facade || 0) === 0
      })

      onBeforeRouteLeave((to, from, next) => {
        const instanceName = instance?.type?.name
        const toName: any = to.name
        if (['TaskDetail'].includes(toName)) {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
        next()
      })

      getDetailData()

      return {
        ...toRefs(datas),
        btnDisable,
        onFacadeDetail,
        onFacadeAll,
        onSaveFace
      }
    }
  }
</script>
<style lang="less" scoped>
  .module-name {
    padding: 16px 0;
    font: var(--font-page-title);
    color: var(--texticon-default-strong);
  }
  .facade-create-form {
    .mg-t8 {
      margin-top: 8px;
    }
    /deep/ .qmp-field__control:disabled {
      color: var(--texticon-default-strong);
    }
  }
</style>
